<template>
    <view class="searchBar">
    	<image class="left" src="../../static/ty_70.png" mode="widthFix"></image>
    	<image class="right" src="../../static/zh_386.png" mode="widthFix"></image>
    	<input v-model="searchValue" focus type="text" confirm-type="search" @confirm="enter" placeholder="奶茶"/>
    </view>
	<view class="row">
		<view class="box" v-for="(item, index) in boxes">
			<view @click="searchValue = item">{{ item }}</view> 
			<uni-icons @click="close(index)" type="close" size="18"></uni-icons>
		</view>
	</view>
	<view class="content">
		<view  v-for="(item, index) in list" :key="index" @click="toShopping" class="box">
			<image :src="item.url" mode="widthFix"></image>
			<view class="name">{{ item.name }}</view>
			<view>
				<image style="width: 20rpx;" src="../../static/sl_51.png" mode="widthFix"></image>
				{{ item.value.toFixed(2) }} CNY
			</view>
		</view>
	</view>
</template>

<script setup >
import { computed, ref } from 'vue'
const searchValue = ref("")
const list = ref([])
const db = uniCloud.database()
const boxes = ref(uni.getStorageSync('searchValue'))
const enter = () => {
	let arr = uni.getStorageSync('searchValue')
	if (typeof arr === 'string') {
		arr = []
	}
	arr = arr.filter((item) => { return item !== searchValue.value });
	arr.unshift(searchValue.value)
	uni.setStorageSync('searchValue', arr)
	boxes.value = arr
	db.collection('goods')
		.where(`${new RegExp(searchValue.value, 'i')}.test(name)`)
		.get()
		.then(res => {
			console.log(res);
			list.value = res.result.data.map(x => {
				return {
					name:x.name,
					value:x.value,
					url:x.image
				}
			})
		}).catch(err => {
			console.log(err.message);
		})
}


const toShopping = () => {
	uni.navigateTo({
		url: '/pages/shopping/shopping'
	})
}

const close = (index) => {
	let arr = uni.getStorageSync('searchValue')
	console.log(arr);
	console.log(index);
	arr.splice(index, 1)
	console.log(arr);
	uni.setStorageSync('searchValue', arr)
	boxes.value = arr
}

</script>

<style lang="scss" scoped>
	.searchBar {
		margin-top: 125rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.left {
			width: 42rpx;
			position: absolute;
			left: 70rpx;
		}
		.right {
			width: 26rpx;
			position: absolute;
			right: 80rpx;
			top: 30rpx;
		}
		input {
			background-color: #F4F4F4;
			height: 52rpx;
			width: 500rpx;
			border-radius: 40rpx;
			padding: 20rpx 80rpx;
			
		}
	}
	
	.row {
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx;
		
		// flex-wrap: ;
		.box {
			padding: 10rpx 20rpx;
			background-color: #F4F4F4;
			font-size: 36rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin:5rpx 10rpx;
			view {
				padding: 2rpx 10rpx;
			}
		}
	}
	.content {
		margin: 40rpx;
		// margin-top: 70rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 25rpx;
		.box {
			// background-color: orange;
			image {
				width: 100%;
			}
		}
	}
</style>
